<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>vue0</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" v-model="firstName">
    <br>
    <input type="text" v-model="lastName">
    <br>
    姓名：<span>{{firstName.slice(0, 3)}}-{{lastName}}</span>
    <br>
    <!--    只要data中的数据进行改变，vue会重新加载一下模板-->
    姓名写法2：<span>{{fullname()}}</span>
    <br>
    姓名写法3：<span>{{fullname2}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const app = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        methods: {
            fullname() {
                return this.firstName + "-" + this.lastName;
            }
        },
        computed: {
            fullname2: {
                //当有人读取fullName的时候，会自动调用get方法，返回值就是fullName的值
                get() {
                    return this.firstName + "-" + this.lastName;
                },
                set(value) {
                    const arr = value.split("-");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>
</body>
</html>
